<template>
  <div class="topo-properties">
    <template v-if="configObject !== null && isLayer === false">
      <el-tabs
        v-model="tabIndex"
        type="border-card"
        :stretch="true"
      >
        <el-tab-pane
          :label="$t('style')"
          name="0"
          class="uni-scroll"
        >
          <el-collapse>
            <el-collapse-item>
              <template slot="title">
                <span style="margin-left: 10px">{{ $t('position') }}</span>
              </template>
              <el-form
                label-position="top"
                label-width="80px"
                style="margin: 10px"
              >
                <el-form-item label="X">
                  <el-input
                    v-model="configObject.style.position.x"
                    type="number"
                  >
                    <template slot="append">{{ $t('pixel') }}</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="Y">
                  <el-input
                    v-model="configObject.style.position.y"
                    type="number"
                  >
                    <template slot="append">{{ $t('pixel') }}</template>
                  </el-input>
                </el-form-item>
                <el-form-item :label="$t('width')">
                  <el-input
                    v-model="configObject.style.position.w"
                    type="number"
                  >
                    <template slot="append">
                      <el-select
                        v-model="configObject.style.position.wUnit"
                        style="width: 80px"
                      >
                        <el-option
                          v-for="item in widthUnitList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item :label="$t('height')">
                  <el-input
                    v-model="configObject.style.position.h"
                    type="number"
                  >
                    <template slot="append">
                      <el-select
                        v-model="configObject.style.position.hUnit"
                        style="width: 80px"
                      >
                        <el-option
                          v-for="item in heightUnitList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </template>
                  </el-input>
                </el-form-item>
              </el-form>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <span style="margin-left: 10px">{{ $t('border') }}</span>
              </template>
              <el-form
                label-position="top"
                label-width="80px"
                style="margin: 10px"
              >
                <el-form-item :label="$t('border')+$t('radius')">
                  <el-input
                    v-model.lazy="configObject.style.borderRadius"
                    type="number"
                  />
                </el-form-item>
                <el-form-item :label="$t('border')+$t('width')">
                  <el-input
                    v-model.number.lazy="configObject.style.borderWidth"
                    type="number"
                  >
                    <template slot="append">{{ $t('pixel') }}</template>
                  </el-input>
                </el-form-item>
                <el-form-item :label="$t('border')+$t('style')">
                  <el-select
                    v-model="configObject.style.borderStyle"
                    style="width: 228px"
                  >
                    <el-option
                      v-for="item in borderStyleOptions"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('border')+$t('color')">
                  <el-input
                    v-model="configObject.style.borderColor"
                    style="width: 80%;float: left"
                  />
                  <el-color-picker v-model="configObject.style.borderColor" />
                </el-form-item>
              </el-form>
            </el-collapse-item>
            <el-collapse-item>
              <template slot="title">
                <span style="margin-left: 10px">{{ $t('base') }}</span>
              </template>
              <el-form
                label-position="top"
                label-width="80px"
                style="margin: 10px"
              >
                <el-form-item :label="$t('visible')">
                  <el-select
                    v-model="configObject.style.visible"
                    style="width: 228px"
                  >
                    <el-option :label="$t('visible')" :value="true" />
                    <el-option :label="$t('inVisible')" :value="false" />
                  </el-select>
                </el-form-item>
                <el-form-item :label="$t('hierarchy')">
                  <el-input
                    v-model.number.lazy="configObject.style.zIndex"
                    type="number"
                  />
                </el-form-item>
                <el-form-item :label="$t('rolate')">
                  <el-input
                    v-model.number.lazy="configObject.style.transform"
                    type="number"
                  >
                    <template slot="append">{{ $t('deg') }}</template>
                  </el-input>
                </el-form-item>
                <el-form-item :label="$t('backgroundColor')">
                  <el-input
                    v-model="configObject.style.bgColor"
                    style="width: 80%;float: left"
                  />
                  <el-color-picker v-model="configObject.style.bgColor" />
                </el-form-item>
                <el-form-item
                  v-if="configObject.style.url != undefined && configObject.style.url != null"
                  :label="$t('url')"
                >
                  <el-input v-model.lazy="configObject.style.url">
                    <template slot="append">
                      <i class="el-icon-folder" @click="openFileChoice('configObject.style.url')" />
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item :label="$t('background')">
                  <el-input v-model.lazy="configObject.style.bgImage">
                    <template slot="append">
                      <i class="el-icon-folder" @click="openFileChoice('configObject.style.bgImage')" />
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item v-if="configObject.style.text != undefined" :label="$t('text')">
                  <el-input v-model.lazy="configObject.style.text" />
                </el-form-item>
                <el-form-item :label="$t('font')+$t('color') ">
                  <el-input
                    v-model="configObject.style.fontColor"
                    style="width: 80%;float: left"
                  />
                  <el-color-picker v-model="configObject.style.fontColor" />
                </el-form-item>
                <el-form-item v-if="configObject.style.fontFamily != undefined" :label="$t('FontFamily')">
                  <el-select
                    v-model="configObject.style.fontFamily"
                    style="width: 228px"
                  >
                    <el-option
                      v-for="item in fontFamilyOptions"
                      :key="item"
                      :label="item"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item v-if="configObject.style.fontSize != undefined" :label="$t('font')+$t('size') ">
                  <el-input
                    v-model.number.lazy="configObject.style.fontSize"
                    type="number"
                    suffix="px"
                    style="padding-right:5px;"
                  >
                    <template slot="append">{{ $t('pixel') }}</template>
                  </el-input>
                </el-form-item>
                <el-form-item v-if="configObject.style.lineWidth != undefined" label="LineWidth">
                  <el-input
                    v-model.number.lazy="configObject.style.lineWidth"
                    type="number"
                    suffix="px"
                    style="padding-right:5px;"
                  />
                </el-form-item>
                <el-form-item v-if="configObject.style.setLineDash != undefined" label="LineDash">
                  <el-input v-model.lazy="configObject.style.setLineDash" type="text" />
                </el-form-item>
              </el-form>
            </el-collapse-item>
            <!-- 目前只有虚线有动画 -->
            <el-collapse-item v-if="configObject.type=='dashed'" title="动画" default-opened>
              <el-form
                label-position="top"
                label-width="80px"
                style="margin: 10px"
              >
                <el-form-item label="Direction">
                  <el-select
                    v-model="configObject.style.animations"
                    style="width: 228px"
                    clearable
                  >
                    <el-option
                      v-for="item in animations"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item v-if="configObject.style.animations" label="DotSpace">
                  <el-input
                    v-model.number.lazy="configObject.style.dotSpace"
                    type="number"
                    suffix="px"
                    class="suffix"
                  />
                </el-form-item>
                <el-form-item label="DotWidth">
                  <el-input
                    v-model.number.lazy="configObject.style.dotWidth"
                    type="number"
                    suffix="px"
                    class="suffix"
                  />
                </el-form-item>
              </el-form>
            </el-collapse-item>
          </el-collapse>
        </el-tab-pane>
        <!--        <el-tab-pane :label="$t('action')" name="2" class="uni-scroll">-->
        <!--          <template v-if="configObject && configObject.action">-->
        <!--            <template v-for="(event,index) in configObject.action">-->
        <!--              <div :key="index" style="margin-top:10px;">-->
        <!--                <div-->
        <!--                  style="padding: 5px;border:#ccc solid 1px;border-radius: 5px"-->
        <!--                >-->
        <!--                  交互-{{ index+1 }}-->
        <!--                  <i-->
        <!--                    class="el-icon-delete q-icon"-->
        <!--                    style="float:right;cursor:pointer;color: #FF805F"-->
        <!--                    @click="removeAction(index)"-->
        <!--                  />-->
        <!--                </div>-->
        <!--                <el-form-->
        <!--                  label-position="top"-->
        <!--                  label-width="80px"-->
        <!--                  style="margin: 10px"-->
        <!--                >-->
        <!--                  <el-form-item :label="$t('event')">-->
        <!--                    <el-select-->
        <!--                      v-model="event.type"-->
        <!--                      style="width: 228px"-->
        <!--                    >-->
        <!--                      <el-option :label="$t('click')" value="click" />-->
        <!--                      <el-option label="双击" value="dblclick" />-->
        <!--                      <el-option label="鼠标移入" value="mouseenter" disabled />-->
        <!--                      <el-option label="鼠标双击" value="mouseenter" mouseleave />-->
        <!--                    </el-select>-->
        <!--                  </el-form-item>-->
        <!--                  <el-form-item :label="$t('action')">-->
        <!--                    <el-select-->
        <!--                      v-model="event.action"-->
        <!--                      style="width: 228px"-->
        <!--                    >-->
        <!--                      <el-option label="打开链接" value="link" disabled />-->
        <!--                      <el-option label="赋值变量" value="val" disabled />-->
        <!--                      <el-option label="展示隐藏" value="visible" />-->
        <!--                      <el-option label="调用服务" value="service" disabled />-->
        <!--                    </el-select>-->
        <!--                  </el-form-item>-->
        <!--                  <el-form-item v-if="event.action == 'visible'" label="点击出现">-->
        <!--                    <el-select-->
        <!--                      v-model="event.showItems"-->
        <!--                      style="width: 228px"-->
        <!--                      multiple-->
        <!--                    >-->
        <!--                      <el-option-->
        <!--                        v-for="item in generateTargetComponentOptions()"-->
        <!--                        :key="item.value"-->
        <!--                        :label="item.label"-->
        <!--                        :value="item.value"-->
        <!--                      />-->
        <!--                    </el-select>-->
        <!--                  </el-form-item>-->
        <!--                  <el-form-item v-if="event.action == 'visible'" label="点击隐藏">-->
        <!--                    <el-select-->
        <!--                      v-model="event.hideItems"-->
        <!--                      style="width: 228px"-->
        <!--                      emit-value-->
        <!--                      multiple-->
        <!--                    >-->
        <!--                      <el-option-->
        <!--                        v-for="item in generateTargetComponentOptions()"-->
        <!--                        :key="item.value"-->
        <!--                        :label="item.label"-->
        <!--                        :value="item.value"-->
        <!--                      />-->
        <!--                    </el-select>-->
        <!--                  </el-form-item>-->
        <!--                </el-form>-->
        <!--              </div>-->
        <!--            </template>-->
        <!--            <div style="width:100%;padding:10px 10px 10px 10px;">-->
        <!--              <el-button style="width:100%;" @click="addAction">{{ $t('add') }}</el-button>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-tab-pane>-->
      </el-tabs>
    </template>
    <template v-if="isLayer">
      <el-card class="card-height">
        <el-form
          label-position="top"
          label-width="80px"
          style="margin: 10px"
        >
          <el-form-item :label="$t('backgroundColor')">
            <el-input
              v-model.lazy="topoData.layer.bgColor"
              style="width: 80%;float: left"
            />
            <el-color-picker v-model="topoData.layer.bgColor" />
          </el-form-item>
          <el-form-item :label="$t('background')">
            <el-input v-model.lazy="topoData.layer.bgImage">
              <template slot="append">
                <i class="el-icon-folder" @click="openFileChoice('topoData.layer.bgImage')" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="分辨率">
            <el-select
              v-model="layerWH"
              style="width: 228px"
            >
              <el-option
                v-for="item in whOptions"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="layerWH == $t('custom')" :label="$t('width')">
            <el-input v-model.number.lazy="topoData.layer.w">
              <template slot="append">
                <el-select
                  v-model="topoData.layer.wUnit"
                  style="width: 80px"
                >
                  <el-option
                    v-for="item in widthUnitList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item v-if="layerWH == $t('custom')" :label="$t('height')">
            <el-input v-model.number.lazy="topoData.layer.h">
              <template slot="append">
                <el-select
                  v-model="topoData.layer.hUnit"
                  style="width: 80px"
                >
                  <el-option
                    v-for="item in heightUnitList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </el-card>
    </template>

    <el-dialog
      :title="$t('file')"
      :visible.sync="userFileVisible"
      top="15px"
    >
      <user-file :model="fileModel" @change="fileChoice" />
    </el-dialog>

  </div>
</template>

<script>

import { mapState } from 'vuex'
import UserFile from '@/components/UserFile'
import { listHeightUnit, listWidthUnit } from '@/topo/components/topo/util/topoUtil'

export default {
  name: 'TopoProperties',
  data() {
    return {
      tabIndex: '0',
      fontFamilyOptions: ['Arial', 'Helvetica', 'sans-serif', '宋体', '黑体', '微软雅黑'],
      borderStyleOptions: ['solid', 'dashed', 'dotted'],
      whOptions: ['1024x768', '1366x768', '1280x800', '1440x900', '1600x900', '1920x1080', this.$t('custom')],
      layerWHTemp: '',
      explainConfig: {},
      settingConfig: {},
      paramConfig: {},
      userFileVisible: false,
      fileModel: '',
      fileTarget: null,
      widthUnitList: listWidthUnit(this),
      heightUnitList: listHeightUnit(this)
    }
  },
  computed: {
    layerWH: {
      get: function() {
        if (!this.topoData.layer.w || !this.topoData.layer.h) {
          this.topoData.layer.w = 600
          this.topoData.layer.h = 1200
        }
        if (this.layerWHTemp === '') {
          const wh = this.topoData.layer.w + 'x' + this.topoData.layer.h
          if (this.whOptions.indexOf(wh, 0) === -1) {
            this.layerWHTemp = this.$t('custom')
          } else {
            this.layerWHTemp = wh
          }
        } else {
          const wh = this.topoData.layer.w + 'x' + this.topoData.layer.h
          if (this.whOptions.indexOf(wh, 0) === -1) {
            this.layerWHTemp = this.$t('custom')
          }
        }
        return this.layerWHTemp
      },
      set: function(val) {
        this.layerWHTemp = val
        if (val === this.$t('custom')) {

        } else {
          const wh = val.split('x')
          this.topoData.layer.w = parseInt(wh[0])
          this.topoData.layer.h = parseInt(wh[1])
        }
      }
    },
    ...mapState({
      topoData: state => state.topoEditor.topoData,
      selectedComponents: state => state.topoEditor.selectedComponents,
      selectedComponentMap: state => state.topoEditor.selectedComponentMap,
      isLayer: state => state.topoEditor.selectedIsLayer,
      configObject: state => state.topoEditor.selectedComponent
    }),
    animations() {
      let items = []
      if (this.configObject.type === 'dashed') {
        items = (this.configObject.direction && this.configObject.direction === 'vertical')
          ? [
            { label: '向上', value: 'up' },
            { label: '向下', value: 'down' }
          ] : [
            { label: '向右', value: 'right' },
            { label: '向左', value: 'left' }
          ]
      }
      return items
    }
  },
  mounted() {

  },
  components: {
    UserFile
  },
  methods: {
    openFileChoice(fileTarget) {
      this.fileTarget = fileTarget
      this.fileModel = 'choice'
      this.showUserFile()
    },
    fileChoice(filePath) {
      switch (this.fileTarget) {
        case 'configObject.style.url':
          this.configObject.style.url = filePath
          break
        case 'topoData.layer.bgImage':
          this.topoData.layer.bgImage = filePath
          break
        case 'configObject.style.bgImage':
          this.configObject.style.bgImage = filePath
          break
      }
      this.userFileVisible = false
    },
    showUserFile() {
      this.userFileVisible = true
    },
    initPage(configData) {
      this.configData = configData
    },
    bindData(configObject, index, isLayer) {
      this.configObject = configObject
      this.isLayer = isLayer
      if (isLayer === false) {

      }
    },
    generateTargetComponentOptions() {
      const options = []
      this.topoData.components.forEach(component => {
        if (this.configObject.identifier != component.identifier) {
          options.push({
            label: component.name || component.type,
            value: component.identifier
          })
        }
      })
      return options
    },
    removeAction(index) {
      this.configObject.action.splice(index, 1)
    },
    addAction() {
      const action = {
        type: 'click',
        action: 'visible',
        showItems: [],
        hideItems: []
      }
      this.configObject.action.push(action)
    }
  }
}
</script>

<style lang="scss" scoped>
.topo-properties {
  height: 100%;
}

.el-tab-pane {
  height: 100%;
}

.card-height {
  height: 100%;
}
</style>
